<template>
	<view class="wrap">
		<view class="tit">
			设备信息
		</view>
		<view class="list">
			<view class="item">
				<view class="name">
					微信版本号
				</view>
				<view class="val">
					{{info.hostVersion}}
				</view>
			</view>
			<view class="item">
				<view class="name">
					手机品牌
				</view>
				<view class="val">
					<!-- Xiaomi -->
					{{info.brand}}
				</view>
			</view>
			<view class="item">
				<view class="name">
					设备型号
				</view>
				<view class="val">
					{{info.model}}
					<!-- M2102K1C -->
				</view>
			</view>
			<view class="item">
				<view class="name">
					操作系统及版本
				</view>
				<view class="val">
					<!-- Android 14 -->
					<!-- {{info.platform}} -->
					{{info.system}}
				</view>
			</view>
			<view class="item">
				<view class="name">
					客户端平台
				</view>
				<view class="val">
					<!-- android -->
					{{info.osName}}
				</view>
			</view>

		</view>
	

		<view class="tit">
			其他信息
		</view>

		<view class="list">
			<view class="item">
				<view class="name">
					小程序版本号
				</view>
				<view class="val">
					{{info.appVersion}}
				</view>
			</view>
			<view class="item">
				<view class="name">
					客户端基础库版本
				</view>
				<view class="val">
					3.6.4
				</view>
			</view>
			<view class="item">
				<view class="name">
					日期时间
				</view>
				<view class="val">
					{{currentTime}}
				</view>
			</view>
			<view class="item">
				<view class="name">
					操作系统及版本
				</view>
				<view class="val">
					<!-- {{info.platform}} -->
					{{info.system}}
				</view>
			</view>
			
			<!-- {{fileSizeString}} -->

		</view>
		
		<view v-if="infos" class="tit">
			关于我们
		</view>
		
		<view  v-if="infos" class="list">
			<view v-if="infos.serviceEmail" class="item">
				<view class="name">
					官方邮箱
				</view>
				<view class="val">
					{{infos.serviceEmail}}
				</view>
			</view>
			<view v-if="infos.servicePhone" class="item">
				<view class="name">
					客服电话
				</view>
				<view class="val">
					{{infos.servicePhone}}
				</view>
			</view>
			<view v-if="infos.icp" class="item">
				<view class="name">
					ICP备案号
				</view>
				<view class="val">
					{{infos.icp}}
				</view>
			</view>
			
			
			<!-- {{fileSizeString}} -->
		
		</view>
	<!-- 	<view class="u-m-t-20">
			<u-button :ripple="true" ripple-bg-color="#c0c4cc" class="sign-out" @click="clear" :hair-line="false">清除缓存
			</u-button>
		</view> -->

		<view class="u-m-t-20">
			<u-button :ripple="true" ripple-bg-color="#c0c4cc" class="sign-out" @click="logout" :hair-line="false">退出登录
			</u-button>
		</view>
	</view>
</template>
<script>
	import dayjs from 'dayjs'
	 
	
	export default {
		data() {
			return {
				infos:null,
				version: '',
				info:null,
				currentTime:'',
				 // 缓存大小展示到页面上
				        fileSizeString: '0KB'
			};
		},
		onLoad() {
			let res = uni.getSystemInfoSync(); //获取系统信息(里面包含微信版本号)
			console.log('手机信息：', res);
			this.info = uni.getSystemInfoSync()

			const miniProgram = wx.getAccountInfoSync();
			this.version = miniProgram.miniProgram.version;

			console.log(miniProgram)
			
			this.currentTime = dayjs().format('YYYY-MM-DD HH:mm:ss'); // 获取当前时间的字符串表示
			console.log(this.currentTime);
			
			
			// 获取缓存信息
			const storageInfo = uni.getStorageInfoSync();
			this.fileSizeString = storageInfo.currentSize
			console.log('当前缓存大小：' + storageInfo.currentSize);
			
			
			
			this.$u.api.aboutUs().then(res => {
				this.infos = res?.data
				console.log(res?.data,555555);
			});
			 
			
		},
		methods: {
			
			

			clear() {
				// 清理缓存
							// uni.clearStorage();
			},
			logout() {
			
			
			let self = this;
			uni.showModal({
				title: '提示',
				content: '确认退出吗？',
				// cancelColor:'#9b9b9b',//删除按钮颜色
				confirmColor: '#F23635', //确定按钮颜色
				success: function(res) {
					if (res.confirm) {
						self.$u.api.logout().then(res => {
							self.$u.toast(res.msg);
							if (res.code == 'ok') {
								
								self.$u.vuex("vuex_token", '');
								
								
								setTimeout(() => {
									uni.reLaunch({
										url: '/pages/sys/login/index'
									});
								}, 500);
							}
						});
			
					} else if (res.cancel) {
			
					}
				}
			});
			
			
				
			}
		}
	};
</script>
<style lang="scss">
	.wrap{
		padding-bottom: 100rpx;
	}
	page {
		background-color: #f2f2f2;
	}

	.tit {
		// background: #f2f2f2;
		color: #989898;
		padding: 20rpx 0 15rpx 30rpx;

	}

	.list {
		background: #fff;

		.item {

			border-bottom: 1rpx solid #efefef;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;
			margin: 0 30rpx;
			font-size: 28rpx;
			color: #4c4c4c;

			.val {
				color: #9c9c9c;
			}
		}
	}

	/deep/ .sign-out {
		color: #2f2f2f;

	}

	/deep/ .u-btn--default {
		color: #2f2f2f !important;
		font-weight: bold !important;
		border-radius: 0 !important;
		word-spacing: 8rpx !important;
		border: none !important;
	}
</style>
